<template>
    <div>
        <ExtForm ref="ExtForm" :formfields="formfields" @changeEventHandler="changeEventHandler"></ExtForm>
        <div style="margin:10px;">
            <div class="table-operator">
                <a-button  shape="round" size="small" type="primary" icon="plus" @click="addField">添加字段</a-button>
            </div>

            <div class="ant-list ant-list-sm ant-list-split" style="max-height:60vh; overflow: auto;">
                <div class="ant-spin-nested-loading">
                    <div class="ant-spin-container">
                        <ul class="ant-list-items">
                            <draggable :list="component.props.formfields" :sort="true" :animation="150" :group="{ name: 'field', pull: false, put: false }">
                                <li class="ant-list-item" v-for="(field,idx) in component.props.formfields" :key="idx">
                                    <div class="ant-list-item-meta">
                                        <div class="ant-list-item-meta-content">
                                            <h4 class="ant-list-item-meta-title">
                                                <a @click="fieldEdit(field)">{{field.label}}</a>
                                                <a-divider type="vertical" />
                                                <a @click="fieldDel(field)">删除</a>
                                            </h4>
                                            <div class="ant-list-item-meta-description">
                                                <a-breadcrumb separator="">
                                                    <a-breadcrumb-item>字段代码</a-breadcrumb-item>
                                                    <a-breadcrumb-separator>:</a-breadcrumb-separator>
                                                    <a-breadcrumb-item >{{field.field}}</a-breadcrumb-item>
                                                    <a-breadcrumb-separator>|</a-breadcrumb-separator>

                                                    <a-breadcrumb-item>组件类型</a-breadcrumb-item>
                                                    <a-breadcrumb-separator>:</a-breadcrumb-separator>
                                                    <a-breadcrumb-item >
                                                        {{componentTypeMap.get(field.component)}}
                                                        
                                                    </a-breadcrumb-item>
                                                </a-breadcrumb>
                                                    
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </draggable>
                        </ul>
                    </div>
                </div>
            </div>
            <InputAttribute ref="InputAttribute" @fieldEdit="fieldEdit"></InputAttribute>
            <InputSearchAttribute ref="InputSearchAttribute" @fieldEdit="fieldEdit"></InputSearchAttribute>
            <TextAreaAttribute ref="TextAreaAttribute" @fieldEdit="fieldEdit"></TextAreaAttribute>
            <SelectAttribute ref="SelectAttribute" @fieldEdit="fieldEdit"></SelectAttribute>
            <SearchSelectAttribute ref="SearchSelectAttribute" @fieldEdit="fieldEdit"></SearchSelectAttribute>
            <TreeSelectAttribute ref="TreeSelectAttribute" @fieldEdit="fieldEdit"></TreeSelectAttribute>
            <IconAttribute ref="IconAttribute" @fieldEdit="fieldEdit"></IconAttribute>
            <InputNumberAttribute ref="InputNumberAttribute" @fieldEdit="fieldEdit"></InputNumberAttribute>
            <DateAttribute ref="DateAttribute" @fieldEdit="fieldEdit"></DateAttribute>
            <MonthAttribute ref="MonthAttribute" @fieldEdit="fieldEdit"></MonthAttribute>
            <DateTimeAttribute ref="DateTimeAttribute" @fieldEdit="fieldEdit"></DateTimeAttribute>
            <TimeAttribute ref="TimeAttribute" @fieldEdit="fieldEdit"></TimeAttribute>
            <SwitchAttribute ref="SwitchAttribute" @fieldEdit="fieldEdit"></SwitchAttribute>
            <RadioAttribute ref="RadioAttribute" @fieldEdit="fieldEdit"></RadioAttribute>
            <RateAttribute ref="RateAttribute" @fieldEdit="fieldEdit"></RateAttribute>
            <UploadAttribute ref="UploadAttribute" @fieldEdit="fieldEdit"></UploadAttribute>
            <TinymceAttribute ref="TinymceAttribute" @fieldEdit="fieldEdit"></TinymceAttribute>
            <selectEntityField ref="selectEntityField" @onAddField="onAddField"></selectEntityField>
        </div>
    </div>
</template>
<script>
import ExtForm from '@/components/lt/codeGenerator/components/ExtForm'
import pageSetting from '@/components/lt/codeGenerator/pageSetting'
import Vue from 'vue'
import draggable from 'vuedraggable'
import {SysMixin} from '@/mixins/SysMixin'
import selectEntityField from '@/views/system/entity/selectEntityField'
import InputAttribute from '@/components/lt/codeGenerator/attribute/InputAttribute'
import InputSearchAttribute from '@/components/lt/codeGenerator/attribute/InputSearchAttribute'
import TextAreaAttribute from '@/components/lt/codeGenerator/attribute/TextAreaAttribute'
import SelectAttribute from '@/components/lt/codeGenerator/attribute/SelectAttribute'
import SearchSelectAttribute from '@/components/lt/codeGenerator/attribute/SearchSelectAttribute'
import TreeSelectAttribute from '@/components/lt/codeGenerator/attribute/TreeSelectAttribute'
import IconAttribute from '@/components/lt/codeGenerator/attribute/IconAttribute'
import InputNumberAttribute from '@/components/lt/codeGenerator/attribute/InputNumberAttribute'
import DateAttribute from '@/components/lt/codeGenerator/attribute/DateAttribute'
import MonthAttribute from '@/components/lt/codeGenerator/attribute/MonthAttribute'
import DateTimeAttribute from '@/components/lt/codeGenerator/attribute/DateTimeAttribute'
import TimeAttribute from '@/components/lt/codeGenerator/attribute/TimeAttribute'
import SwitchAttribute from '@/components/lt/codeGenerator/attribute/SwitchAttribute'
import RadioAttribute from '@/components/lt/codeGenerator/attribute/RadioAttribute'
import RateAttribute from '@/components/lt/codeGenerator/attribute/RateAttribute'
import UploadAttribute from '@/components/lt/codeGenerator/attribute/UploadAttribute'
import TinymceAttribute from '@/components/lt/codeGenerator/attribute/TinymceAttribute'
import {findComponentUpward} from '@/utils/util'
import { Modal } from 'ant-design-vue'
export default {
    name:'GridFormColAttribute',
    components:{selectEntityField,draggable,ExtForm,InputAttribute,InputSearchAttribute,TextAreaAttribute,SelectAttribute,SearchSelectAttribute,
        TreeSelectAttribute,IconAttribute,InputNumberAttribute,DateAttribute,MonthAttribute,DateTimeAttribute,TimeAttribute,SwitchAttribute,RadioAttribute,RateAttribute,
        UploadAttribute,TinymceAttribute,},
    mixins:[SysMixin],
    props:{
        component:{
           type:Object,
           default:()=>{}
        },
    },
    watch:{
        
    },
    data(){
        return{
            componentTypeMap:new Map(),
            pageSetting,
            formfields:[
                {field:'label',label:'标题',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.label,rules: [{ required: true, message: '不能为空!' }]},
                {field:'ref',label:'ref',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.ref,disabled:true},
                {field:'span',label:'占位格数',component:pageSetting.常量.表单组件类型.下拉选择,initialValue:this.component.props["span"],options:pageSetting.数据字典.网格表单栅格占位格数},   
                {field:'entityClassName',label:'实体',component:pageSetting.常量.表单组件类型.单行文本,initialValue:this.component.props.entityClassName,disabled:true}
            ],
         
      
        }
    },
   
    created(){
        this.getComponentType()
    },
    mounted () {
        
        this.$nextTick(() => {
            
           let g = findComponentUpward(this,'GridFormAttribute')
            
        })
    },
    methods:{
        getComponentType(){
            for(let i=0;i<pageSetting.数据字典.表单类型.length;i++){
                this.componentTypeMap.set(pageSetting.数据字典.表单类型[i].itemValue,pageSetting.数据字典.表单类型[i].itemText)
            }
        },
        changeEventHandler(item){
            if(item["label"]){
                this.component.label=item.label
                for(let i=0;i<this.component.components.length;i++){
                    if(this.component.components[i].type==pageSetting.常量.组件.标题){
                        this.component.components[i].label=item.label
                    }
                }
            }else{
                for (const key in item) {
                    Vue.set(this.component.props,key,item[key])
                }
            }

        },
        addField(){
            this.handleEdit({},'selectEntityField','实体选择')
        },
        onAddField(fields){
            let fieldCodelist= this.component.props.formfields.map(item => item['field'])
            fields.map(item=>{
                if(!fieldCodelist.includes(item['entityField'])){
                    Vue.set(this.component.props,"entityClassName",item.entityClassName)
                    this.component.props.formfields.push(
                        {label:item.entityFieldTitle,field:item.entityField,component:pageSetting.常量.表单组件类型.单行文本,dbField:item.dbField,entityClassName:item.entityClassName}
                    )
                }
            })
           
            
        },
        fieldEdit(field){
            let attribute='InputAttribute'
            switch (field.component) {
                case pageSetting.常量.表单组件类型.单行文本:
                    attribute="InputAttribute"
                    break
                case pageSetting.常量.表单组件类型.密码:
                    attribute="InputAttribute"
                    break
                case pageSetting.常量.表单组件类型.输入搜索框:
                    attribute="InputSearchAttribute"
                    break
                case pageSetting.常量.表单组件类型.输入选择框:
                    attribute="InputSearchAttribute"
                    break
                case pageSetting.常量.表单组件类型.多行文本:
                    attribute="TextAreaAttribute"
                    break
                case pageSetting.常量.表单组件类型.下拉选择:
                    attribute="SelectAttribute"
                    break
                case pageSetting.常量.表单组件类型.下拉搜索:
                    attribute="SearchSelectAttribute"
                    break
                case pageSetting.常量.表单组件类型.树选择:
                    attribute="TreeSelectAttribute"
                    break
                case pageSetting.常量.表单组件类型.图标选择:
                    attribute="IconAttribute"
                    break
                case pageSetting.常量.表单组件类型.数字输入框:
                    attribute="InputNumberAttribute"
                    break
                case pageSetting.常量.表单组件类型.日期选择:
                    attribute="DateAttribute"
                    break
                case pageSetting.常量.表单组件类型.月份选择:
                    attribute="MonthAttribute"
                    break
                case pageSetting.常量.表单组件类型.日期加时间选择:
                    attribute="DateTimeAttribute"
                    break
                case pageSetting.常量.表单组件类型.时间选择:
                    attribute="TimeAttribute"
                    break
                case pageSetting.常量.表单组件类型.开关:
                    attribute="SwitchAttribute"
                    break
                case pageSetting.常量.表单组件类型.单选框:
                    attribute="RadioAttribute"
                    break
                case pageSetting.常量.表单组件类型.评分:
                    attribute="RateAttribute"
                    break
                case pageSetting.常量.表单组件类型.图片上传:
                    attribute="UploadAttribute"
                    break
                case pageSetting.常量.表单组件类型.文件上传:
                    attribute="UploadAttribute"
                    break
                default:
                    attribute="InputAttribute"  
            }
            this.handleEdit(field,attribute,field.label)
        },
        fieldDel(field){
            Modal.confirm({
                title: "系统提醒",
                content: "确定删除？",
                onOk: () => {
                    this.component.props.formfields = this.component.props.formfields.filter(item=>{
                        return item.field!=field.field
                    })
                },
                onCancel () {}
            })
            
        },

        
    }
}
</script>

<style scoped>
/* ::v-deep .ant-select-selection{
    border: none !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color:rgba(0, 0, 0, 0.45) !important;
}
::v-deep .ant-select-arrow{
    display: none !important;
} */
</style>

